<template>
  <header class="bg-white border-b border-[var(--border-color)] px-3 py-2">
    <div class="flex items-center justify-between gap-3">
      <div class="flex items-center gap-3">
        <!-- 返回按钮 -->
        <button v-if="showBackButton" @click="goBack"
                class="text-lg text-gray-500 hover:text-blue-600 transition-colors cursor-pointer">
          <i class="fas fa-arrow-left"></i>
        </button>

        <div class="flex items-center flex-shrink-0">
          <i class="fas fa-layer-group text-blue-600 text-lg mr-1 cursor-pointer" @click="router.replace('/')"
             title="返回主界面"></i>
<!--          <span-->
<!--              id="mes-connection-status"-->
<!--              class="connection-status"-->
<!--              :class="{ 'connection-online': globalStore.mesOnline, 'connection-offline': !globalStore.mesOnline }"-->
<!--              :title="globalStore.mesOnline ? 'MES已连接' : 'MES连接断开'"-->
<!--          ></span>-->
        </div>

        <div
            class="header-info-group flex items-baseline gap-3 pr-3 border-r border-[var(--border-color)] flex-wrap whitespace-nowrap">
          <div><span class="hmi-label">线别:</span><span class="hmi-value">{{
              plcConfig.lineId
            }}</span></div>
          <div><span class="hmi-label">站别:</span><span
              class="hmi-value">{{ plcConfig.stationId }}</span></div>
          <div><span class="hmi-label">机台:</span><span
              class="hmi-value">{{ plcConfig.machineId }}</span></div>
        </div>

        <div class="header-opid flex items-baseline flex-shrink-0 whitespace-nowrap">
          <span class="hmi-label">操作员:</span><span class="hmi-value">{{ loginUser }}</span>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <div class="machine-status flex items-baseline gap-1 whitespace-nowrap">
<!--          <div class="status-lights flex gap-1">-->
<!--            <div class="status-light" :class="{ active: globalStore.lights.red }"></div>-->
<!--            <div class="status-light" :class="{ active: globalStore.lights.yellow }"></div>-->
<!--            <div class="status-light" :class="{ active: globalStore.lights.green }"></div>-->
<!--          </div>-->
<!--          <span class="status-text" :class="globalStatusClass">{{ globalStore.statusText }}</span>-->
        </div>

        <span class="text-xs text-[var(--text-secondary)] font-medium whitespace-nowrap flex-shrink-0">
          {{ currentTime }}
        </span>

        <!-- 机器待命按钮 -->
        <button
            @click="handleMachineStandby"
            class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
            title="将机器设置为待命状态"
        >
          <i class="fas fa-pause text-xs"></i>
          <span>待命</span>
        </button>
      </div>
    </div>
  </header>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue'
import {useRouter} from 'vue-router'
import {getLastUser} from '@/api/user';
import {getPlcInfo} from '@/api/plc';

const loginUser = ref('未登录')

const router = useRouter()

const props = defineProps({
  showBackButton: {type: Boolean, default: true}
})

// --- 响应式数据 ---
const currentTime = ref('')

let timeInterval = null

const plcConfig = ref({
  lineId: '',
  stationId: '',
  machineId: ''
})

// --- 方法 ---
const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString('zh-CN', {hour12: false})
}

const goBack = () => {
  router.back()
}

// 处理机器待命
const handleMachineStandby = () => {
  // 导航到待命确认页面而不是直接执行待命
  router.push('/run/standby-confirm');
}
// --- 生命周期钩子 ---
onMounted(() => {
  getLastUser().then(opid => {
    loginUser.value = opid
  })
  getPlcInfo().then(config => {
    plcConfig.value = {
      lineId: config.lineId || '',
      stationId: config.stationId || '',
      machineId: config.machineId || ''
    }
  })
  // 更新时间
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
/* Header 组件特有的样式 */
.connection-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 0.25rem;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.connection-online {
  background-color: var(--online-green);
}

.connection-offline {
  background-color: var(--offline-red);
}

.status-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--status-light-off);
}

.status-light.active {
  background-color: var(--status-light-on);
}

.status-text {
  font-size: 0.8rem;
  font-weight: 500;
}

.status-run {
  color: var(--status-run);
}

.status-stop {
  color: var(--status-stop);
}

.status-idle {
  color: var(--status-idle);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.hmi-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 0.15rem;
}

.hmi-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
</style>
